import { useEffect } from "react"
import { useSelector } from "react-redux"
import { Button, Form, Input, Selector } from 'antd-mobile'
import './index.css'

function Outbook () {

    const billtype = useSelector(state => state.billtype.billtype)
    useEffect(() => {
    }, [])

    return (
        <div>
            <Form layout='horizontal'>
                <Form.Item label='金额' name='username'>
                    <Input placeholder='输入今日收获吧' clearable />
                </Form.Item>
                <Form.Item className="icon-box">
                        {billtype?.map((item, index) => {
                            if (item.flow === 'outcom') {
                                return (
                                    <Button >
                                        <div dangerouslySetInnerHTML={{__html:item.icon.replace('<svg', '<svg width="30px" height="30px"')}}></div>
                                        <div>{item.name}</div>
                                    </Button>
                                        
                                )
                            }
                                        
                        })}
                </Form.Item>
                
            </Form>
            
            
        </div>
    )
}

export default Outbook